<div class="card-view">
  <% tags ||= @tags # allow overriding with local variable %>
  <% shown_nids = [] %>
  <% tags.each do |tag| %>
    <div class="card shadow-sm p-2 mb-3 bg-white rounded" >
      <div class="card-header mt-2" style=" padding:0.8em; background-color: inherit; border:none;">
        <% if current_user && current_user.following(tag.name) && controller.controller_name != 'tag' %>
          <a style="margin-top:-8px;" data-method="delete" data-confirm="Are you sure you'd like to unfollow this topic?" rel="tooltip" title="<%= translation('tag.show.unfollow',{},false) %>" class="pull-right" href="/unsubscribe/tag/<%= tag.name %>"><i style="color:#ccc;" class="fa fa-times"></i></a>
        <% end %>
        <h4 style="display: inline-block;"><a href="<%= tag.name %>"><%= tag.name %></a></h4>
        <p style="display: inline-block; color: #808080;"><a style="text-decoration: underline; color: #808080;" href="/tag/<%= tag.name %>"><%= Tag.follower_count(tag.name) %> following</a></p>
      </div>
      <div class="card-body" style="padding:0.8em;">
        <div class="node-list">
          <% Tag.find_nodes_by_type(tag.name, type = 'note', limit = 3).where.not(nid: shown_nids).each do |node|  %>
            <% shown_nids << node.id %>
            <div class="node-body">
              <% if node.main_image %>
                <img aria-hidden="true" class="rounded-circle pull-left" id="profile-photo" style="width:20px; height:20px; margin-right:8px; display: inline-block;" src="<%= node.main_image.path(:default) %>" />
              <% elsif node.scraped_image %>
                <img aria-hidden="true" class="rounded-circle pull-left" id="profile-photo" style="width:20px; height:20px; margin-right:8px; display: inline-block;" src="<%= node.scraped_image %>" />
              <% else %>
                <div class="circle"></div>
              <% end %>
              <div style="margin-left: 10px; display: grid;">
                <p>
                  <a style="color: inherit;" <% if @widget %>target="_blank"<% end %> href="<%= node.path %>"><%= (node.type == 'note') ? node.title : node.latest.title %></a>
                    <span style="color: #808080;"><%= translation('tag.show.by') %> <a <% if @widget %>target="_blank"<% end %> href="/profile/<%= node.author.name %>">@<%= node.author.name %></a></span>
                </p>
              </div>
            </div>
          <% end %>
        </div>
      </div>

      <div class="card-footer" style="background-color: inherit; border:none;">
        <a style="padding-top:15px;text-decoration:underline;color:#808080;display:inline-block;" href="/tag/<%= tag.name %>"><%= Tag.tagged_node_count(tag.name) %> <%= translation('tag.index.posts') %> &raquo;</a>
        <div id="follow-unfollow-column-<%=tag.tid%>" style="float:right;margin:10px 0 10px 10px;">
          <% if current_user %>
            <% if !current_user.following(tag.name) %>
              <a style="width: 100px;" class="btn btn-outline-secondary btn-sm index-follow-buttons follow-btn-remote" href="/subscribe/tag/<%= tag.name %>" data-remote="true"><%= translation('tag.index.follow') %></a>
            <% end %>

            <% if current_user.following(tag.name) && controller.controller_name == 'tag' %>
              <a style="width: 100px;"
                 data-method="delete"
                 data-confirm="Are you sure you'd like to unfollow this topic?"
                 rel="tooltip" title="<%= translation('tag.show.unfollow',{},false) %>"
                 class="btn btn-outline-secondary btn-sm index-follow-buttons follow-btn-remote"
                 href="/unsubscribe/tag/<%= tag.name %>">Unfollow</a>
            <% end %>

            <a rel="tooltip" title="<%= translation('sidebar._post_button.share_your_work',{},false) %>" data-placement="bottom" href="/post?tags=<%= tag.name %>" class="btn btn-primary btn-sm requireLogin">New post <i class="fa fa-plus fa-white"></i></a>
          <% else %>
            <a class="btn btn-primary btn-sm index-follow-buttons follow-btn-remote requireLogin" href="/subscribe/tag/<%= tag.name %>" data-remote="true"><%= translation('tag.index.follow') %></a>
          <% end %>
        </div>
      </div>
    </div>
  <% end %>
</div>

<style>

  .node-list {
    display: grid;
  }

  .card-view a {
    display: revert;
  }

</style>
